import React, { useEffect, useState } from 'react'
import { Button, Card, message, Empty, Space, Input } from 'antd'
import { listDictByPage } from '@/services/dictService'
// @ts-ignore
import { Link, useModel } from '@umijs/max'
import DictList from '../DictList'

const DEFAULT_PAGE_SIZE = 5

interface Props {
  title?: string
  needLogin?: boolean
  showTag?: boolean
  onLoad?: (
    searchParams: DictType.DictQueryRequest,
    setDataList: (dataList: DictType.Dict[]) => void,
    setTotal: (total: number) => void
  ) => void
  onImport?: (values: DictType.Dict) => void
}

const DictCard: React.FC<Props> = (props) => {
  const { title = '公开词库', needLogin = false, showTag = true, onLoad, onImport } = props

  const [dataList, setDataList] = useState<DictType.Dict[]>([])
  const [total, setTotal] = useState(0)
  const [loading, setLoading] = useState(true)
  const initSearchParams: DictType.DictQueryRequest = {
    current: 1,
    pageSize: DEFAULT_PAGE_SIZE,
    sortField: 'createTime',
    sortOrder: 'ASC'
  }
  const [searchParams, setSearchParams] = useState<DictType.DictQueryRequest>(initSearchParams)

  const { initialState } = useModel('@@initialState')
  const loginUser = initialState?.loginUser

  const innerOnLoad = () => {
    listDictByPage({
      ...searchParams,
      // 只展示已审核通过的
      reviewStatus: 1
    })
      .then((res) => {
        setDataList(res.data.records)
        setTotal(res.data.total)
      })
      .catch((e) => {
        message.error('加载失败，' + e.message)
      })
  }

  useEffect(() => {
    // 需要登录
    if (needLogin && !loginUser) return
    setLoading(true)
    if (onLoad)
      onLoad(searchParams, setDataList, setTotal)
    else
      innerOnLoad()
    setLoading(false)
  }, [searchParams])

  return (
    <div className='dict-info-card'>
      <Card
        title={title}
        extra={
          <Link to='/dict/add'>
            <Button type='primary'>创建词库</Button>
          </Link>
        }
      >
        {!needLogin || loginUser ? (
          <>
            <Space>
              <Input.Search
                placeholder='请输入名称'
                enterButton='搜索'
                onSearch={(value) => {
                  setSearchParams({
                    ...initSearchParams,
                    name: value
                  })
                }}
              />
            </Space>
            {/* 单词展示列表 */}
            <DictList
              pagination={{
                total,
                onChange: (current) => {
                  setSearchParams({ ...searchParams, current })
                  window.scrollTo({ top: 0 })
                },
                pageSize: DEFAULT_PAGE_SIZE,
              }}
              dataList={dataList}
              loading={loading}
              showTag={showTag}
              onImport={onImport}
              setDataList={setDataList}
            />
          </>
        ) : (
          <Empty
            description={
              <Link to='/user/login'>
                <Button type='primary' ghost style={{ marginTop: 8 }}>
                  请先登录
                </Button>
              </Link>
            }
          />
        )}
      </Card>
    </div>
  )
}

export default DictCard